import UIContextmenu from '../components/ui-contextmenu.vue';
import Vue from 'vue';

export default {
  props: {
    rightClickMenus: {
      type: Array
    },
    rightClickMenusOption: {
      type: Object
    }
  },
  components: { UIContextmenu },
  data() {
    return {
      contextmenuDom: null
    };
  },
  methods: {
    customRowHandel(record, index) {
      let events = {};
      let timer = null;
      if (this.rightClickMenus) {
        events.contextmenu = (event) => {
          if (this.contextmenuDom) {
            this.closeContextmenuDom();
          }
          this.uIContextmenu = this.uIContextmenu || Vue.extend(UIContextmenu);

          this.contextmenuDom = new this.uIContextmenu({
            propsData: {
              bodyStyle: this.getBodyStyle(event),
              record,
              index,
              closeContextmenuDom: this.closeContextmenuDom,
              rightClickMenus: this.initRightClickMenus(record)
            }
          }).$mount();
          document.body.appendChild(this.contextmenuDom.$el);
          let doms = this.$el.querySelectorAll(`tr[data-row-key="${record[this.calcRowKey]}"]`);
          this.recordDoms = doms;
          if (this.recordDoms) {
            Array(...this.recordDoms).forEach((dom) => {
              dom.style.background = window.themeJsVariables?.themeBrand1 || '#e6f7ff';
            });
          }
          event.preventDefault();
        };
      }
      events.click = (event) => {
        timer && clearTimeout(timer);
        // 同上句的作用300延时
        timer = setTimeout(() => {
          console.log('rowDelayClick');
          // click 事件的处理
          this.$emit('rowDelayClick', record, index, event);
          clearTimeout(timer);
          timer = null;
        }, 300);
        event.preventDefault();
      };
      events.dblclick = (event) => {
        timer && clearTimeout(timer);
        timer = null;
        this.$emit('rowDoubleClick', record, index, event);
        event.preventDefault();
      };
      return {
        props: {},
        on: events
      };
    },
    closeContextmenuDom() {
      if (this.contextmenuDom) {
        document.body.removeChild(this.contextmenuDom.$el);
        let { record } = this.contextmenuDom.$props;
        this.contextmenuDom = null;
        if (this.recordDoms) {
          Array(...this.recordDoms).forEach((dom) => {
            dom.style.background = '';
          });
          this.recordDoms = null;
        }
        this.$emit('contextmenuClosed', record);
      }
    },
    getBodyStyle(event) {
      let cuntomStyle = (this.rightClickMenusOption && this.rightClickMenusOption.style) || {};
      // 菜单高度
      let menuHeight = 0;
      this.rightClickMenus.forEach((menu) => {
        if (menu.height) {
          menuHeight += menu.height;
        } else if (menu.type === 'line') {
          menuHeight += 5;
        } else {
          menuHeight += 34;
        }
      });

      let top = event.clientY;
      let left = event.clientX;
      let width = this.changePxValueToNumber(cuntomStyle.width) || 112;
      let innerHeight = window.innerHeight;
      let innerWidth = window.innerWidth;
      if (top + menuHeight > innerHeight) {
        // 浮动在上
        top = top - menuHeight;
        // 如果上面也展示不下
        if (top < 0) {
          top = 0;
        }
      }

      if (left + width > innerWidth) {
        left = left - width;
      }
      return {
        top: top + 'px',
        left: left + 'px',
        maxHeight: innerHeight + 'px',
        ...cuntomStyle
      };
    },
    changePxValueToNumber(value) {
      if (value && typeof value === 'string') {
        value = value.replace('px', '');
        return Number(value);
      }
      return 0;
    },
    initRightClickMenus(record) {
      return this.rightClickMenus.map((menu) => {
        let ext = {};
        if (menu.valueHandel) {
          ext.value = menu.valueHandel(record, menu);
          return { ...menu, ...ext };
        } else {
          return menu;
        }
      });
    }
  },

  mounted() {}
};
